    <style>
    .tree {
        
        border-top:1px solid #f5f5f5;
        margin-top: 5px;
        /*background-color:transparent !important;
        border:1px solid #999;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        margin-top: 10px; */
    }
    .tree li {
        list-style-type:none;
        margin:0;
        padding:10px 5px 0 5px;
        position:relative
    }
    .tree li::before, .tree li::after {
        content:'';
        left:-20px;
        position:absolute;
        right:auto
    }
    .tree li::before {
        border-left:1px solid #999;
        bottom:50px;
        height:100%;
        top:0;
        width:1px
    }
    .tree li::after {
        border-top:1px solid #999;
        height:20px;
        top:25px;
        width:25px
    }
    .tree li span {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border:1px solid #999;
        border-radius:5px;
        display:inline-block;
        padding:1px 4px;
        text-decoration:none
    }
    .tree li.parent_li>span {
        cursor:pointer
    }
    .tree>ul>li::before, .tree>ul>li::after {
        border:0
    }
    .tree li:last-child::before {
        height:30px
    }
    .tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
        background:#eee;
        border:1px solid #94a0b4;
        color:#000
    }
</style>

<div id='treeMenu' class="tree">
    <ul id='rootMenu'>
        <li>
            <span style="background-color:#ffffff"><i class="glyphicon glyphicon-plus"></i> <a href="#store">Store</a></span> 
            <ul id='catMenus'>
                {{#each this}}
                {{#each categories}}
                <li id="cat-{{id}}">
                    {{#if subCategories.length}}                         
                    <span><i class="glyphicon glyphicon-plus"></i> <a href='#CatId/{{id}}/products'>{{name}}</a></span> 
                    <ul >
                        {{#each subCategories}}               
                        <li><span><i class="grand-child glyphicon"></i> <a href='#subCatId/{{id}}/subCatName/{{name}}'>{{name}}</a></span> </li>
                        {{/each}}
                    </ul>
                    {{else}}
                    <span><i class="glyphicon"></i> <a href='#subCatId/{{id}}/subCatName/{{name}}'>{{name}}</a></span> 
                    {{/if}}
                </li>   
                {{/each}}
                {{/each}}
            </ul>
    </ul>
</div>
<script>
    $(function() {
        $('.tree ul#rootMenu li ul li').css('display', 'none')
        $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Expand this branch');
        $('.tree li.parent_li > span').on('click', function(e) {
            
            //var hdrHt = $('header').height();
            var children = $(this).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible"))
            {
                children.hide('fast');
                $(this).attr('title', 'Expand this branch').find(' > i').addClass('glyphicon-plus').removeClass('glyphicon-minus');
                
                // hdrHt = hdrHt + 300;
                 //var nMt = "-"+hdrHt;
                 //$('#bodyPart').css('margin-top', -hdrHt);
                
            }
            else//tree expand
            {
                children.show('fast');
                $(this).attr('title', 'Collapse this branch').find(' > i').addClass('glyphicon-minus').removeClass('glyphicon-plus');
               
              // hdrHt = hdrHt + 300;
               //$('#bodyPart').css('margin-top', hdrHt);
            }
            
            //console.log('MARGIN TOP-->' + $('#bodyPart').offset().top);
            e.stopPropagation();
        });
    });
</script>



